import { Button } from "antd-mobile/2x";
import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as userActions from "../../../store/actions/user";
import { Dialog } from "antd-mobile/2x";
import "./index.scss";
const btnList = [
  {
    icon: "icon-icon-wodefangwu",
    title: "我的出租",
    path: "/myRoom",
  },
  {
    icon: "icon-jilu",
    title: "看房记录",
    path: "/recordHomeList",
  },
  {
    icon: "icon-chengweirenzhengyonghu",
    title: "成为房主",
    path: "/housesAdd",
  },
  {
    icon: "icon-wode",
    title: "个人资料",
    path: "/setUser",
  },
  {
    icon: "icon-lianxiwomen",
    title: "联系我们",
  },
];
interface V {
  icon: string;
  title: string;
  path?: string;
}
const My = (props: any) => {
  const { getUserData, userData } = props;
  console.log(getUserData);

  const { push } = useHistory();
  const token = localStorage.getItem("token");
  const loginFun = () => {
    if (!localStorage.getItem("token")) {
      push("/login");
    } else {
      console.log(1);
      Dialog.show({
        content: "确认退出登录吗？",
        closeOnAction: true,
        bodyStyle: { height: "100px", paddingTop: "30px" },
        actions: [
          [
            {
              key: "cancel",
              text: "取消",
            },
            {
              key: "ok",
              text: "确定",
              bold: true,
              danger: true,
              onClick: () => {
                localStorage.removeItem("token");
                push("/index/home");
              },
            },
          ],
        ],
      });
    }
  };
  //点击时间
  const shop = (item: V) => {
    if (item.path) {
      push(item.path);
    }
  };
  useEffect(() => {
    if (Object.values(userData).length <= 0 && localStorage.getItem("token")) {
      getUserData();
    }
  }, [userData, getUserData]);

  return (
    <div className="myBox">
      <div className="topBox">
        <img
          src="https://api-haoke-web.itheima.net/img/profile/bg.png"
          alt=""
        />
        <div className="userBox">
          <div className="img">
            <img
              src="https://api-haoke-web.itheima.net/img/profile/avatar.png"
              alt=""
            />
          </div>
          <h4>{userData.nickname || "访客"}</h4>
          <Button color="success" onClick={() => loginFun()}>
            {token ? "退出登录" : "去登录"}
          </Button>
        </div>
      </div>
      <div className="mainBox">
        {btnList.map((v) => {
          return (
            <div key={v.icon} onClick={() => shop(v)}>
              <i className={`iconfont ${v.icon}`}></i>
              <span>{v.title}</span>
            </div>
          );
        })}
      </div>
      <div className="footBox">
        <img
          src="https://api-haoke-web.itheima.net/img/profile/join.png"
          alt=""
        />
      </div>
    </div>
  );
};
const mapStateToProps = (state: any) => {
  return state.user;
};
const mapDispatchToProps = (dispatch: any) => {
  return bindActionCreators(userActions, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(My);
